<template>
<div class="viewport">
    <topTitle title="确认订单"></topTitle>
    <div class="order-address">
        <a id="address">
            <!-- 这里加一个判断是否有默认的地址，如果没有就显示填写收货地址 -->
            <div class="hasAddress">
                <p class="name clearfix">
                    <input type="hidden" class="orderAddressId" value="6131184055200173">
                    <label>李阙艾</label>
                    <span>13924368168</span>
                    <span class="default">默认</span>
                </p>
                <p class="addr">
                    江苏省,无锡市,锡山区,城区,宁海里二期小区243号
                </p>
            </div>
        </a>
    </div>
    <div class="orderLists">
        <div class="pro-lists" data-orderid="2018122114563717013">
            <a href="/m/mproduct?id=1321">
                <div class="pro-box">
                    <div class="img">
                        <img src="https://image.jianke.com/upload/prodimage/201606wm/2016625103445693.jpg" alt="">
                    </div>
                    <div class="info">
                        <div class="name">
                            温馨白
                        </div>
                        <div class="prop">通用,</div>
                        <div class="opt">
                            <span class="num">x 1</span>
                            <div class="price">
                                <i>￥</i>
                                <span>0.01</span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            <div class="lists-part-line distribute">
                <label>运费</label>
                <input type="hidden" class="transportTypeName" value="顺丰">
                <div class="fr">
                    <span>
                        
                        包邮
                        
                    </span>
                    <div class="pointer-r">
                        <div class="nav-right"></div>
                    </div>
                </div>
            </div>
            <div class="rowM2">
                <span class="fl">买家留言：</span>
                <div class="label-input">
                    <input class="orderMessage" type="text" placeholder="选填(85字以内)" maxlength="84">
                    <i class="clearRemarks hidden"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="orderConf-count">
        <ul>
            <li>
                <label>商品总额：</label>
                <span>
                    <i>￥</i>0.01</span>
            </li>
            <li>
                <label>商品运费：</label>
                <span class="col-plus">
                    <i>+￥</i>0</span>
            </li>
        </ul>
    </div>
    <div class="orderConf-conf-bottom viewport">
        <div class="realPay-r">
            <input class="realPayBtn" type="button" value="提交订单">
        </div>
        <div class="realPay">
            <p>应付金额：
                <span>
                    <i>￥</i>0.01</span>
            </p>
        </div>
    </div>
</div>
</template>
<script>
import TopTitle from  "@/components/web/public/TopTitle"
export default {
    nama:"firmOrder",
    data(){
        return{
            
        }
    },
    components:{
        topTitle:TopTitle
    }
}
</script>
<style>
.order-address {
    position: relative;
    height: 2.06rem;
    background-color: #FFFCF5;
    margin-top: 0.88rem;
}
.order-address:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: .05rem;
    background: url(../../../assets/img/border-line.png);
    background-size: 100% 100%;
}
.order-address:after {
    content: '';
    position: absolute;
    right: .32rem;
    top: 50%;
    margin-top: -0.16rem;
    width: .32rem;
    height: .32rem;
    background-image: url(../../../assets/img/arrow_grey_r.png);
    background-size: 100%;
}
.order-address .hasAddress {
    padding: .32rem;
}
.order-address .hasAddress .name {
    font-size: .38rem;
    color: #000;
}
.order-address .hasAddress .name label {
    float: left;
    max-width: 3.04rem;
    margin-right: .16rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.3rem;
}
.order-address .hasAddress .name span {
    float: left;
    font-size: 0.3rem;
}
.order-address .hasAddress .name .default {
    margin-top: .03rem;
    margin-left: .16rem;
    width: .84rem;
    height: .44rem;
    line-height: .44rem;
    font-size: .26rem;
    text-align: center;
    color: #68B52E;
    border: 1px solid #68B52E;
    border-radius: 2px;
}
.order-address .hasAddress .addr {
    margin-top: 0.8rem;
    width: 100%;
    font-size: .26rem;
    color: #424242;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.order-address .hasAddress .addr::before {
    content: '';
    display: inline-block;
    width: .48rem;
    height: .48rem;
    background-image: url(../../../assets/img/icon-location.png);
    background-size: 100%;
    vertical-align: -34%;
}
.orderLists {
    margin-top: .16rem;
}
.orderLists .pro-lists {
    padding: .32rem .32rem 0 .32rem;
    background-color: #fff;
    margin-bottom:  .16rem ;
}

.pro-box {
    margin-bottom: .32rem;
    padding-top: .16rem;
    border-bottom: 1px solid #F2F2F2;
    overflow: hidden;
}
.pro-box .img {
    float: left;
    margin-right: .32rem;
    width: 1.8rem;
    height: 1.8rem;
}
.pro-box .img img {
    width: 100%;
    height: 100%;
}
.pro-box .info {
    overflow: hidden;
    padding-left: 0px;
}
.pro-box .info .name {
    font-size: .3rem;
    line-height: .4rem;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: box;
    box-orient: vertical;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}
.pro-box .info .prop {
    margin: .1rem 0;
    font-size: .26rem;
    color: #666;
}
.pro-box .info .opt {
    position: relative;
}
.pro-box .info .opt .num {
    float: right;
    font-size: .3rem;
    color: #666;
}
.pro-box .info .opt .price {
    font-size: .34rem;
    color: #FF4F00;
}
.pro-box .info .opt .price i {
    font-size: .2rem;
}
.lists-part-line {
    position: relative;
    padding: 0 .8rem 0 0;
    height: .96rem;
    line-height: .94rem;
    font-size: .3rem;
    background: #fff;
}
.nav-right {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -0.16rem;
    width: .32rem;
    height: .32rem;
    background: url(../../../assets/img/arrow_grey_r.png) no-repeat;
    background-size: 100%;
    transition: all .2s;
}
 .rowM2 {
    margin-bottom: .16rem;
    font-size: .3rem;
    line-height: 0.6rem;
    padding-top: 0.2rem;
}
 .label-input {
    position: relative;
    overflow: hidden;
}
.label-input > input {
    width: 91%;
    padding: 0 .1rem;
    font-size: .26rem;
    background: #fff;
    border: none;
}

.orderConf-count {
    padding: .24rem .32rem;
    background: #FFF;
}
.orderConf-count > ul > li {
    height: 0.7rem;;
    line-height: 0.7rem;;
}
.orderConf-count > ul > li label {
    float: left;
    font-size: .3rem;
}
.orderConf-count > ul > li span {
    float: right;
    height: .56rem;
    font-size: .34rem;
}
.orderConf-count > ul > li i {
    font-size: .2rem;
}
.orderConf-count > ul > li .col-plus {
    color: #FF4F00;
}
.orderConf-count > ul > li .col-sub {
    color: #57D9A3;
}
.label-input > input {
    width: 91%;
    padding: 0 .1rem;
    font-size: .26rem;
    background: #fff;
    border: none;
}
.orderConf-conf-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1.28rem;
    line-height: 1.28rem;
    background-color: #fff;
    z-index: 99;
}
.orderConf-conf-bottom .realPay-r {
    float: right;
    width: 2.8rem;
    height: 100%;
}
.orderConf-conf-bottom .realPay-r .realPayBtn {
    width: 100%;
    height: 100%;
    font-size: .34rem;
    color: #fff;
    background: #FF4F00;
    border-radius: 0;
}
.orderConf-conf-bottom .realPay {
    padding-left: .32rem;
    font-size: .3rem;
    overflow: hidden;
    border-top: 1px solid #f2f2f2;
}
.orderConf-conf-bottom .realPay span {
    font-size: .46rem;
    color: #FF4F00;
}
</style>
